<template>
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<el-link style="width: 5%;" @click="gologin()"> 返回登录</el-link>
			<div style="width: 100%;"><p style="text-align: center;">忘记密码</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"></div>
		<div style="width: 50%; margin-left: 25%;margin-top: 10%;">
		<el-card >
			<div style="width: 100%;">
				<el-main>
					<div style="margin-left: 34%;">
					<el-form :model="data.user" :rules="rules" ref="formRef">
						<el-form-item label="登录名:" prop="uname">
							<el-input v-model="data.user.uname" placeholder="用户名" :prefix-icon="Cellphone" style="width: 16rem;margin-left: 3%;" />
						</el-form-item>
						<el-form-item label="账号名:" prop="account">
							<el-input v-model="data.user.account" placeholder="账号名" :prefix-icon="Cellphone" style="width: 16rem;margin-left: 3%;" />
						</el-form-item>
						<el-form-item label="手机号:" prop="phone">
							<el-input v-model="data.user.phone" placeholder="手机号" :prefix-icon="Cellphone" style="width: 16rem;margin-left: 3%;" />
						</el-form-item>
						<el-form-item label="重置密码:" prop="password">
							<el-input v-model="data.user.password" placeholder="更改后密码" :prefix-icon="Lock" type="password" clearable="" style="width: 16rem;" />
						</el-form-item>
						<el-form-item label="确认密码:" prop="pwd">
							<el-input v-model="data.user.pwd" placeholder="确认密码" :prefix-icon="Lock" type="password" clearable="" style="width: 16rem;" />
						</el-form-item>
						<el-button  @click="add()" style="background-color: #E1337F;  margin-left: 6rem;color: #FFFFFF;">确认修改</el-button>
					</el-form>
					</div>
					
				</el-main>
				</div>
		</el-card>
		</div>
		</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import { User,Lock,Cellphone,UserFilled,GoldMedal,Timer,Calendar} from '@element-plus/icons-vue'
		import router from"../router/index.js"
		import store from "../store/index.js"
		import {success,warning,message,errors} from '../store/alert.js'
		import bottom from "../components/bottom.vue"
		const data=reactive({
			user:{account:"",uname:"",phone:"",password:"",pwd:""}
		})
		function gologin(){
			router.push("/login")
			
		}
		function add(){
			if(data.user.password!=data.user.pwd){
				errors("密码不一致")
				return
			}
			let fd=new FormData()
			fd.append("account",data.user.account)
			fd.append("uname",data.user.uname)
			fd.append("phone",data.user.phone)
			fd.append("password",data.user.password)
			$postf("/public/fgPwd",fd).then((read)=>{
				if(read.data.code==401){
					errors(read.data.msg)
					return
				}else{
					success(read.data.msg)
					router.push("/login")
				}
			})
			
			
		}
		onMounted(()=>{
			store.state.gologin=true
			
			
		})
</script>

<style>
</style>
